<template>
  <div class="reserveBox">
     <div class="reserveBox1">
       <h1>兵马俑+华清宫成人票（提前一天预定）</h1>
       <p><span>￥220</span>起</p>
       <div class="reserveTime">
         <p>价格日历</p>
         <ul ref="bgcolor" >
           <li v-for="(item,index) of list"
               :key="index"
               :class="{active :index == isActive}"
               @click="changeBgColor(index)"
           >
             {{item.day}}
            <p>{{item.date}}</p>
           </li>
           <li @click.stop>更多日期</li>
         </ul>
       </div>
       <div class="focus">! 需要在游玩前1天的23:30前预订</div>
       <router-link
         to="/shopping"
         class="button"
         tag="div"
       >
         立即预定
       </router-link>
     </div>
     <div class="back" @click="closeRes">X</div>
  </div>
</template>
<script>

  export default {
    name: 'ticketReserve',
    data() {
      return {
        isActive: false,
        list: [{day: '今天', date: ''},
          {day: '明天', date: ''},
          {day: '后天', date: ''}
        ],
        bg: {
          backgroundColor: 'yellow'
        },
      }
    },
    mounted() {
      const day = new Date();
      var m = day.getMonth() + 1;
      var d = day.getDate();
      const today = m + "月" + d + "日";
      const tomorrow = m + "月" + (d + 1) + "日";
      const afteTomorrow = m + "月" + (d + 2) + "日";

      this.list[0].date = today;
      this.list[1].date = tomorrow;
      this.list[2].date = afteTomorrow;
    },
    methods: {
      closeRes() {
        this.$emit("close")
      },
      changeBgColor(index) {
         this.isActive = index;
      }
    }

  }
</script>
<style scpoed>
 .reserveBox {
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,.6);
   position: fixed;
   top: 0;
   left: 0;
   box-shadow: 1px 1px 3px #7e8c8d;
   overflow: hidden;
 }
  .reserveBox1 {
    width: 100%;
    height: 28%;
    background-color: white;
    position: fixed;
    bottom: 0;
    left: 0;
  }
  .reserveBox1 h1 {
    font-size: 20px;
    font-weight: bold;
    margin:5px;
  }
 .reserveBox1 p {
   font-size: 12px;
   font-weight: bold;
   margin:5px;
 }
 .reserveBox1>p>span {
   color: red;
 }
  .reserveTime p {
    font-size: 10px;
    color: #333333;
    margin: 15px 5px 5px 5px;

  }
 .focus {
   height: 30px;
  line-height: 30px;
   margin-left: 5px;
   color: red;
   font-size: 12px;
   margin-top: 5px;
 }
  .reserveTime ul {
    list-style: none;
    height:45px;
  }
 .reserveTime ul li {
   float: left;
   width: 21%;
   height: 45px;
   text-align: center;
   line-height: 30px;
   margin-left: 10px;
   border: 1px solid #333333;
   border-radius: 5px;

 }
 .reserveTime ul li:last-child {
   line-height: 45px;
 }
 .reserveTime ul li p {
   margin-top: -15px;
   font-size: 8px;
   color:#333333;
 }
  .button {
    width: 100%;
    height: 40px;
    background-color: green;
    box-shadow: #cccccc;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    color:orange;
    font-size: 20px;
    line-height: 40px;
  }
  .back {
    position: absolute;
    right: 5px;
    top: 74%;
    width: 25px;
    height: 25px;
    background-color: rgba(0,0,0,.2);
    border-radius: 25px;
    line-height: 25px;
    text-align: center;
  }
  .active {
    background-color: red;
  }
</style>
